<template>
  <div id='tmpl'>
    	<ul class="mui-table-view">
				<li v-for="item in list" class="mui-table-view-cell mui-media">
					<router-link v-bind="{to:'/news/newsinfo/'+item.id}">
						<img class="mui-media-object mui-pull-left"  :src="item.img_url">
						<div class="mui-media-body">
							{{item.title}}
							<p class='mui-ellipsis'>{{item.zhaoyao}}</p>
               <div class="ft">
                  <span>发表时间:{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                  <span class="click">点击数:{{item.click}}</span>
                </div>
						</div>
					</router-link>
				</li>
			</ul>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';

export default {
  data(){
    return {
      list:[]
    };
  },
  created(){
    this.getnewslist();
  },
  methods:{
    //获取api中的数据
   getnewslist(){
     //1.0  确定url
     //2.0利用get请求数据，根据后台；
     this.$http.get(this.$common.apidomain+"/api/getnewslist").then(function(res){
       //获取响应报文体数据
       //数据格式注意
       var data = res.body;
       if(data.status !=0){
         Toast(data.message);
         return;
       }
       this.list=data.message;
     })
   }
  }
}
</script>
<style lang="css" scoped>
 .mui-table-view img{
   height: 80px;
   width: 80px;
 }
 .mui-table-view .mui-media-object{
    max-width: 80px;
    line-height: 80px;
 }
 .ft{
   margin-top:1em;
  font-size:14px;
 }

.ft .click{
   margin-left:20px;
 }
</style>